<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'matForbid.add'">创建</el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 320px" :clearable="true" v-model="query.queryString.material_id"
        placeholder="请输入选择物料" filterable :remote-method="getMaOptions" remote @change="research">
        <el-option v-for="i in maOptions" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 300px" placeholder="物料/供应商/批次号" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.param">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="{row,key}">
        <span v-if="key =='published_date' && row[key]">
          {{ row[key].slice(0,10) }}
        </span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'matForbid',
  data: function () {
    return {
      api: this.$api.forbid,
      apiCreate: this.$api.forbid + 'modify',
      apiEdit: this.$api.forbid + 'modify',
      name: '禁用料管理',
      columns: [
        { title: '生效日期', key: 'published_date', width: 100 },
        { title: '料号', key: 'key_part_no', width: 170 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '供应商代码', key: 'vendor_code', width: 90 },
        { title: '供应商名称', key: 'vendor_name', width: 150 },
        { title: '物料批次号', key: 'lot_date_code', width: 140 },
        { title: '是否禁用', key: 'forbid_flag', width: 90 },
        { title: '禁用原因', key: 'forbid_reason', width: 140 },
        // { title: '仓库名', key: 'warehouse_name', width: 90 },
        // { title: '储位', key: 'stock_code', width: 90 },
        // { title: '余量', key: 'qty', width: 90 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '物料信息',
          key: 'material_id',
          required: true,
          name: 'select',
          options: [],
          props: {
            filterable: true,
            remote: true,
            remoteMethod: null,
          },
          events: { change: null },
        },
        {
          title: '供应商',
          key: 'vendor_id',
          name: 'select',
          tips: '不选择供应商则表示此物料直接禁用，不区分来料厂商',
          options: [],
          props: {
            filterable: true,
            clearable: true,
          },
        },
        {
          title: '批次日期码',
          key: 'lot_date_code',
          tips: '不输入则表示此物料所有批次都做禁用',
          span: 12,
        },
        {
          title: '是否禁用',
          key: 'forbid_flag',
          name: 'switch',
          span: 12,
          props: { activeValue: 'Y', inactiveValue: 'N' },
        },
        {
          title: '生效日期',
          key: 'published_date',
          tips: '当实际日期大于等于此日期时，系统开始管控发料禁用',
          required: true,
          name: 'date',
          props: {
            valueFormat: 'yyyy-MM-dd',
          },
        },
        { title: '禁用原因', key: 'forbid_reason', required: true },
        { title: '备注', key: 'remarks', name: 'textarea' },
      ],
      query: {
        queryString: {},
        page: 1,
        size: 10,
      },
      data: { forbid_flag: 'Y' },
      maOptions: [],
    }
  },
  methods: {
    getMaOptions(query) {
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query })
          .then((r) => {
            this.maOptions = this.arrayOptions(r, 'id', ['key_part_no', 'key_part_name'])
            this.getFieldConfig('material_id').options = this.maOptions
          })
          .catch(() => {})
      } else {
        this.maOptions = {}
      }
    },
    createItem() {
      this.data = _.cloneDeep(this.initData)
      this.data['forbid_flag'] = 'Y'
      this.editFormVisible = true
    },
    materialSelectedChange() {
      this.data.stock_id = ''
      this.getStockOptions
    },
    getStockOptions() {
      this.$request(this.$api.stock + 'getmatconflist', {
        material_id: this.data.material_id,
        page: 1,
      }).then((r) => {
        this.setFieldOptions('stock_id', r.list, 'stock_id', 'stock_code')
      })
    },
    singleOption(id) {
      if (id) {
        this.$request(this.$api.mat + 'getmatandsku', { id }).then((r) => {
          this.getFieldConfig('material_id').options = this.arrayOptions(r, 'id', ['key_part_no', 'key_part_name'])
        })
      } else {
        this.getFieldConfig('material_id').options = []
      }
    },
    formatAfterGet(data) {
      this.singleOption(data.material_id)
      return data
    },
  },
  created: function () {
    this.getList()
    this.$request(this.$api.vendor + 'getlist', { page: 1 }).then((r) => {
      this.setFieldOptions('vendor_id', r.list, 'id', ['vendor_code', 'vendor_name'])
    })
    this.getFieldConfig('material_id').props.remoteMethod = this.getMaOptions
    this.getFieldConfig('material_id').events.change = this.materialSelectedChange
  },
}
</script>
<style scoped>
</style>
